<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM查询操作</title>
    <script>
        function f1(){
            // 根据id属性查找节点
            // id属性值不能重复,因此返回的只有一个节点
            // 参数是需要找的节点的id属性值
            let btn = document.getElementById("btn");
            console.log(btn);
        }
        function f2(){
            // 根据name属性查询节点
            // 由于name属性值可以重复,因此,返回的是节点集合
            // 参数为对应节点的name属性值
            let bs = document.getElementsByName("b");
            console.log(bs);
        }
        function f3(){
            // 根据标签名查询节点
            // 找到所有指定标签的节点
            // 参数为标签名
            let btns = document.getElementsByTagName("button");
            console.log(btns);
        }
        function f4(){
            let btn = document.querySelector("#btn");
            console.log(btn);
            // 该方法只返回所有匹配的元素中的第一个元素
            // let c1 = document.querySelector(".c1");
            // 该方法返回所有匹配的元素
            let c1 = document.querySelectorAll(".c1");
            console.log(c1);
            let btns = document.querySelectorAll("button");
            console.log(btns);
        }
    </script>
</head>
<body>
<button class="c1" id="btn" onclick="f1()">根据id属性查询对应节点</button><br>
<button class="c1" name="b" onclick="f2()">根据name属性查找节点</button><br>
<button name="b">第二个name为btn的按钮</button><br>
<!--
    将超链接的href属性值设置为javascript:;
    表示点击超链接之后执行对应的js代码
    但是由于该代码啥都没做
    因此,当前超链接点击之后什么都没有发生
-->
<a class="c1" href="javascript:;" name="b" onclick="f3()">根据标签名查找节点</a><br>
<a href="javascript:;" onclick="f4()">根据css选择器查找节点</a><br>
</body>
</html>